<template>
  <div>
    <Navbar />
    <div class="content">
      <div class="form-title">{{ loginMode === 'password' ? '密码登录' : '验证码登录' }}</div>
      <div class="switch-to-verify-right">
        <a href="#" class="switch-to-verify" @click.prevent="switchLoginMode">{{ loginMode === 'password' ? '切换验证码登录' : '密码登录' }}</a>
      </div>
      <van-form @submit="onSubmit">
        <van-field
          v-if="loginMode === 'password'"
          v-model="username"
          label="用户名"
          placeholder="请输入用户名"
          required
        />
        <van-field
          v-if="loginMode === 'password'"
          v-model="password"
          :type="showPassword ? 'text' : 'password'"
          label="密码"
          placeholder="请输入密码"
          required
        >
          <template #button>
            <van-switch
              v-model="showPassword"
              size="24px"
              active-color="#1989fa"
              inactive-color="#c0ccda"
            />
          </template>
        </van-field>
        <van-field
          v-if="loginMode === 'verify'"
          v-model="phoneNumber"
          label="手机号"
          placeholder="请输入手机号"
          required
        />
        <van-field
          v-if="loginMode === 'verify'"
          v-model="verificationCode"
          label="验证码"
          placeholder="请输入验证码"
          required
        >
          <template #button>
            <van-button
              v-if="!isSendingVerificationCode"
              size="small"
              type="primary"
              @click="sendVerificationCode"
            >发送验证码</van-button>
            <span v-else>{{ verificationCodeCountdown }}秒后重发</span>
          </template>
        </van-field>
        <div class="switch-login">
          <van-button round block type="primary" native-type="submit">登录</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Form as VanForm, Field as VanField, Button as VanButton, Switch as VanSwitch } from 'vant'
import Navbar from '@/components/Navbar.vue'

const loginMode = ref('password')
const username = ref('')
const password = ref('')
const showPassword = ref(false)
const phoneNumber = ref('')
const verificationCode = ref('')
const isSendingVerificationCode = ref(false)
const verificationCodeCountdown = ref(60)

function switchLoginMode() {
  loginMode.value = loginMode.value === 'password' ? 'verify' : 'password'
}

//  导入 utils/request中的 rq方法
import { rq } from '@/utils/request';
// 导入 router
import { useRouter } from 'vue-router'
const router = useRouter()
function onSubmit() {

  // 调用 rq 方法
  rq('/login/password', 'POST', {
    username: 'testuser',
    password: 'testpassword'
  })
  .then(response => {
    console.log('响应数据:', response);
    // 弹出登陆成功的toast
    showToast(response.data.message)
    // 跳转到 / 路由
    router.push('/')
  })
  .catch(error => {
    console.error('请求失败:', error);
  });
}

// 导入showToast
import { showToast } from 'vant'

function sendVerificationCode() {
  // 点击发送验证码后的倒计时逻辑
  if (phoneNumber.value) {
    isSendingVerificationCode.value = true
    const countdownInterval = setInterval(() => {
      verificationCodeCountdown.value--
      if (verificationCodeCountdown.value <= 0) {
        clearInterval(countdownInterval)
        isSendingVerificationCode.value = false
        verificationCodeCountdown.value = 60
      }
    }, 1000)
  }else{
    // 手机号为空
    showToast('请输入手机号');
    return;
  }
}

// 初始化时检查登录模式
onMounted(() => {
  switchLoginMode()
})
</script>

<style scoped>
.content {
  padding: 16px;
}

.form-title {
  font-size: 18px;
  color: #333;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.switch-to-verify-right {
  display: flex;
  justify-content: flex-end;
}

.switch-login {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
}

.switch-to-verify {
  color: #1989fa;
  text-decoration: none;
}

/* 添加以下样式以确保表单元素正常显示 */
.van-field__control {
  width: 100%;
}

.van-field__label {
  display: block;
  margin-bottom: 8px;
}

.van-field {
  margin-bottom: 16px;
}
</style>